<template>
  <div  ww3 auto>
    <p  fz-14="">用户搜索以下关键词时，您的作品被点击</p>
    <div class="sale-type" flex flex-b flex-c>
      <el-radio-group v-model="radio" @change="typeChange" class="sale-type-l">
        <el-radio v-model="radio" label="1">点击</el-radio>
        <el-radio v-model="radio" label="2">下载</el-radio>
      </el-radio-group>
    </div>
    <el-card class="box-card">
      <div flex ww1 class="search-box">

        <div v-for="(item, n) in list" :key="n">
          <dl flex flex-c v-if="n%2 == 0">
            <dt>
              <a href="" target="_blank" ww1 h-1>
                <img :src="flieUrl + item.filesImg" ww1 h-1>
              </a>
            </dt>
            <dd>
              <span>{{item.categoryName}}</span>
              <span>{{item.recDate}}</span>
              <span black cur @click="handleEdit">{{item.title}}</span>
            </dd>
          </dl>
          <el-divider></el-divider>
          <dl flex flex-c v-if="n%2 == 1">
            <dt>
              <a href="" target="_blank" ww1 h-1>
                <img src="https://pic.vjshi.com/2021-08-14/a4e4533e4a32e0ecf484f8abcc792566/online/main.jpg?x-oss-process=style/resize_w_285" ww1 h-1>
              </a>
            </dt>
            <dd>
              <span>情感</span>
              <span>5小时前</span>
              <span black cur @click="handleEdit">转化分析</span>
            </dd>
          </dl>
        </div>
      </div>
    </el-card>
    <div style="text-align: center;">
        <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="currentChange">
      </el-pagination>
    </div>



  </div>
</template>

<script>
import $http from "@/api/info/info"
export default {
  name: "OrderInvoice",
  data() {
    return {
      flieUrl: this.$url.fileUrl,
      pageSize: 10,
      pageNum: 1,
      total: 0,
      radio: '1',
      dialogFormVisible: false,
      tableData: [{
        date: '100',
        name: 'https://pic.vjshi.com/2021-01-27/0438e08167daaf27ab262ce1f61393ef/online/main.jpg?x-oss-process=style/resize_w_285',
        province: '炫酷',
        city: '3000',
        address: '45',
        zip: 203,
        date2: '2021-11-01',
        per:'黄千惠',
        card:'450***********23',
        satus: 1,
      }],
      currentDate: new Date(),
      list: []

    }
  },

  mounted() {
    this.dynamicPage();
  },

  methods:{
    /**
     * typeChange
     */
    typeChange() {
      this.dynamicPage();
    },
    change(){
      this.$router.push({
        name:'VatInvoice'
      })
    },

    handleEdit(id) {
      this.$router.push({
        name: 'Analyse',
        params: {
          id:'10000'
        }
      })
    },
    currentChange(val) {
      this.pageNum = val;
      this.dynamicPage();
    },
    /**
     * 获取搜索列表
     */
    dynamicPage() {
      let page = {
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      let data = {
        userId: sessionStorage.getItem("userId"),
        status: Number(this.radio)
      }
      $http.dynamicPage(page, data).then(res => {
        console.log("获取搜索列表",res);
        this.totla = res.total;
        this.list = res.rows;
      })
    },

  }


}
</script>

<style scoped>
.box-card{
  margin: 2% auto;
  padding-top: 4%;
}

.search-box{
  justify-content: center;
  
}
dd span {
  display: block;
}
.search-box dl{

}
.search-box dt{
  width: 100px;
  height: 60px;
  margin-right: 30px;
}

.search-box dt img{

}
.search-box dd{
  color: var(--nav-color);
}
.search-box dd span{
  font-size: 14px;
  margin-right: 40px;
}

</style>
